<template>
  <div class="inviteFriends front-color">
    <div class="headGuide clearfix">
      <span class="invitedFriendsNum">{{$t('myAdd.invitation.hasInviteFrends')}}({{hasInvitedFrends}})</span>
      <span class="back pointer" @click="goBack"><span class="sideIcon"><</span>{{$t('myAdd.invitation.back')}}</span>
    </div>
    <div class="listData">
      <table>
        <thead>
          <tr>
            <th class="index">{{$t('myAdd.invitation.indexs')}}&nbsp;/&nbsp;{{$t('myAdd.invitation.user')}}</th>
            <th class="time"><span class="pointer" @click="timeSort('time')">{{$t('myAdd.invitation.time')}}<i class="before" :class="{up: sortType === 'up' && sortName === 'time'}"></i><i class="after" :class="{down: sortType === 'down' && sortName === 'time'}"></i></span></th>
            <th class="member"><span class="pointer" @click="memberSort('count')">{{$t('myAdd.invitation.vips')}}<i class="before" :class="{cur: sortType === 'up' && sortName === 'count'}"></i><i class="after" :class="{curr: sortType === 'down' && sortName === 'count'}"></i></span></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in showInviteFriendsDataArr" :key="index">
            <td class="index"><span class="numberSpan">{{index + 1}}</span><span class="imgSpan"><img :src="item.photoUrl || defaultHeadImg" alt="."></span><span class="nickName">{{item.userName}}</span></td>
            <td class="time"><span>{{_P.formatTime(item.time)}}</span></td>
            <td class="member"><span><span v-if="item.count">+</span>{{item.count}}</span></td>
          </tr>
        </tbody>
      </table>
      <noData v-if="!showInviteFriendsDataLeng"></noData>
      <VPagination v-if="(inviteFriendsPage.count/inviteFriendsPage.pageSize) > 1"
                   :total="inviteFriendsPage.count"
                   :current-page='inviteFriendsPage.page'
                   :display='inviteFriendsPage.pageSize'
                   @pagechange="inviteFriendsChange($event)" class="page">
      </VPagination>
    </div>
  </div>
</template>

<script>
import defaultHeadImg from '@/assets/img/otc/portrait.png'
import VPagination from '@/components/common/pagination'
import noData from '@/components/addPage/common/noData'
export default {
  name: 'inviteFriends',
  components: { VPagination, noData },
  data () {
    return {
      defaultHeadImg: defaultHeadImg,
      inviteFriendsPage: {
        count: '',
        pageSize: 10,
        page: 1
      },
      inviteFriendsData: [],
      sortName: null,
      sortType: null,
      showInviteFriendsDataArr: [],
      hasInvitedFrends: this._P.fixUrl('num')
    }
  },
  computed: {
    showInviteFriendsDataLeng () {
      return this.inviteFriendsPage.count
    }
  },
  mounted () {
    this.getInviteFriends()
  },
  methods: {
    inviteFriendsChange (page) {
      this.inviteFriendsPage.page = page
      this.showInviteFriendsDataArr = this.inviteFriendsData[page - 1]
    },
    goBack () {
      this.$router.go(-1)
    },
    // 获取已邀请好友数据
    getInviteFriends () {
      this.axios({
        url: this.$store.state.url.invite.invite_list,
        headers: {},
        methods: 'post'
      }).then(res => {
        if (res.code.toString() === '0') {
          this.inviteFriendsData = []
          this.inviteFriendsPage.count = res.data.length
          res.data.forEach((item, index) => {
            let page = Math.floor(index / this.inviteFriendsPage.pageSize)
            if (!this.inviteFriendsData[page]) {
              this.inviteFriendsData[page] = []
            }
            this.inviteFriendsData[page].push(item)
          })
          this.showInviteFriendsDataArr = this.inviteFriendsData[this.inviteFriendsPage.page - 1]
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    },
    timeSort (val) {
      if (val !== this.sortName || this.sortType === 'up') {
        this.showInviteFriendsDataArr = this._P.sortByKey(this.showInviteFriendsDataArr, val)
        this.sortName = val
        this.sortType = 'down'
      } else {
        this.sortType = 'up'
        this.showInviteFriendsDataArr = this._P.sortByKey(this.showInviteFriendsDataArr, val).reverse()
      }
    },
    memberSort (val) {
      if (val !== this.sortName || this.sortType === 'up') {
        this.showInviteFriendsDataArr = this._P.sortByKey(this.showInviteFriendsDataArr, val)
        this.sortName = val
        this.sortType = 'down'
      } else {
        this.sortType = 'up'
        this.showInviteFriendsDataArr = this._P.sortByKey(this.showInviteFriendsDataArr, val).reverse()
      }
    }
  }
}
</script>
